<template>
	<view class="upData-cover">
		<shop-file-picker style="width: 100%;" :value="fileList" :file-mediatype="fileType" :limit="maxCount"
			:file-extname="file_extname" mode="grid" ref="files" @select="select" @delete="del"
			:image-styles="imageStyles" :auto-upload="false">
			<image :src="imgUrl+'16557826807714447598.png'" mode="widthFix" style="width: 83px;height: 83px;">
			</image>
		</shop-file-picker>
		<u-overlay :show="show" @click="show = false" class="u-flex u-row-center u-col-center">
			<view>
				<u-loading-icon size="70" :textSize="23" text="上传中" textColor="white" :vertical="true" color="white">
				</u-loading-icon>
			</view>

		</u-overlay>

	</view>
</template>

<script>
	import shopFilePicker from "@/components/shop-file-picker/shop-file-picker.vue"
	export default {
		components: {
			shopFilePicker
		},
		props: {
			maxCount: {
				type: Number,
				default: 1
			},

			file_extname: {
				type: String,
				default: 'jpg,jpeg,png'
			},
			fileType: {
				type: String,
				default: 'image'
			},
			fileList: {
				type: Array
			}
		},

		data() {
			return {
				pathSize:0,
				imageStyles: {
					width: 83,
					height: 83,
					border: {
						color: "#D5D5D5",
						width: 2,
						style: 'dashed',
						radius: '10px'
					}
				},
				show: false,
				imgUrl: this.$IMG_URL,
			};
		},
		methods: {
			del(e) {
				
				this.$emit('del', e.index);
			},

			select(e) {
			
				e.tempFiles.forEach(item=>{
					this.pathSize = item.size
					
				})
				this.show = true;
				if (e.tempFilePaths.length > 0) {
					e.tempFilePaths.map(item => {
						this.upload(item)
					})
				}

			},

			// 上传失败
			fail(e) {
				
				this.$u.toast('上传失败')
			},
			upload(url) {
				
				uni.uploadFile({
					url: this.$API_URL + 'app3/upload/uploadOne', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					success: (res) => {
						
						res = JSON.parse(res.data)
						if (res.code == 200) {
							this.show = false;
							this.$emit('success', {
								url: res.data,
								size:this.pathSize
							});
			
						} else {
							this.$u.toast(res.msg);
						}

					}
				});

			},
		},
	};
</script>

<style scoped lang="scss">
	.upData-cover {
		display: flex;
		flex-wrap: wrap !important;
		flex-shrink: 1;
	}

	.grid {
		margin-right: 10rpx;

		display: grid;
		grid-template-columns: repeat(3, 1fr);
		row-gap: 36rpx;
		column-gap: 24rpx;
	}

	::v-deep .icon-del-box {
		width: 16px;
		height: 16px;
	}
</style>
